<template>
  <div>
    <div :id="option.id"></div>
  </div>
</template>
<script>
  import { lineChartsConfig } from '@/api/chartsConfig'
  export default {
    name: 'singleColumnCharts',
    props: ['chartsData', 'option'],
    // data() {
    //   return { }
    // },
    methods: {
      draw() {
        const chart = new this.$G2({
          container: this.option.id,
          autoFit: true,
          height: 500,
        })

        chart.data(this.chartsData)
        chart.scale({
          year: {
            range: [0, 1],
          },
          value: {
            min: 0,
            nice: true,
          },
        })
        if (this.option.countUnit) {
          chart.axis('count', {
            label: {
              formatter: val => {
                return val + this.option.countUnit
              },
            },
          })
        }
        if (this.option.nameUnit) {
          chart.axis('name', {
            label: {
              formatter: val => {
                return val + this.option.nameUnit
              },
            },
          })
        }
        chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true,
        })

        chart
          .line()
          .position('name*count')
          .label('count')
          .shape('smooth')
          .color(lineChartsConfig.lineColor)
        chart.point().position('name*count')
        chart.render()
      },
    },
    mounted() {
      this.draw()
    },
  }
</script>
